<template>
    <div class="wrongbook">
        <div class="banner"></div>
        <div class="bookinfo">
             <div class="title">
                <h2>错题本</h2>
                <el-divider><i class="el-icon-guide titleicon"></i></el-divider>
                <h3>以学员满意度、以学员学习效果为本</h3>
            </div>
             <div class="back">返回上一页 >></div>
             <div class="searchbox">
                 <el-date-picker
                    v-model="form.date"
                    type="date"
                    placeholder="选择日期"
                    class="itemSearch"
                    >
                </el-date-picker>
                <el-input   class="itemSearch" v-model="form.chapter" placeholder="请输入章数"></el-input>
                <el-input   class="itemSearch" v-model="form.section" placeholder="请输入节数"></el-input>
                <el-input   class="itemSearch" v-model="form.keywords" placeholder="请输知识点关键字"></el-input>
                <el-button  class="itemSearch" type="primary">查询</el-button>
             </div>
             <div class="booklist">
                 <el-table
                    :data="tableData"
                    style="width: 100%"
                    :header-cell-style="getRowClass"
                    @row-click="handleInfo"
                    >
                    <el-table-column
                    prop="date"
                    label="做题时间"
                    align="center"
                    header-align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="题目"
                    align="center"
                    header-align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="学生答案"
                    align="center"
                    header-align="center"
                    >
                    </el-table-column>
                </el-table>
             </div>

        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                sub:'',
                form:{
                    date:'',
                    chapter:'',
                    section:'',
                    keywords:''
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    id: 200333,
                    tag: '家'
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    id: 200333,
                    tag: '家'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    id: 200333,
                    tag: '公司'
                    }]
            }
        },
        mounted(){
            // console.log(this.$route.params.id);
            const id = this.$route.params.id;
            let subList =[
                {label:'语文',value:1},
                {label:'数学',value:2},
                {label:'化学',value:3},
                {label:'英语',value:4},
                {label:'物理',value:5},
                {label:'生物',value:6}
                ];
            subList.forEach((item)=>{
                if(item.value == id){
                 return  this.sub = item.label;
                }
            })

        },
        methods:{
            getRowClass({ row, column, rowIndex, columnIndex }){
                if (rowIndex == 0) {
                        return 'background:#EFEFEF'
                } else {
                        return 'border:none'
                }

            },
            handleInfo(row,column){
                console.log(row)
                this.$router.push(`/WrongsInfo/${row.id}`)
                // console.log( column)
                // console.log( event)
            }
        }
    }

</script>

<style lang='scss'>
.wrongbook{
    .banner{
        width: 100%;
        height: 360px;
        background: url('/static/image/wrongbg.png') no-repeat;
        background-size:100% 100%;
        background-position: center; 
    }
    .bookinfo{
        width: 1200px;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 50px;
        .title{
            h2 {
                font-size: 36px;
                text-align: center;
                margin: 40px 0;
                font-weight: normal;
            }
            h3 {
                font-size: 18px;
                text-align: center;
                color: #737373;
                margin: 40px 0;
                font-weight: normal;
            }
            .el-divider__text, .el-link {
                font-weight: 500;
                font-size: 45px;
            }
        }
        .back{
            width: 100%;
            text-align: right;
            color:#ca0000;
            margin-bottom: 30px;
            cursor: pointer;
        }
        .searchbox{
            width: 80%;
            margin: 20px auto;
            display: flex;
            justify-content: space-around;
            .itemSearch{
                width: 20%;
                margin: 0 5px;
                &:last-child{
                    width: 10%;
                }
            }
        }
        .booklist{
            width: 100%;
        }
    }
}

.el-table--border, .el-table--group{
    border: none;
  }
  .el-table__header-wrapper th:nth-last-of-type(2){
    border-right: none;
  }
  .el-table--border td:nth-last-of-type(1){
    border-right: none;
  }
  .el-table--border::after, .el-table--group::after{
    width: 0;
  }
  .booklist .el-table td {
        border-bottom: 0px!important;
  }

</style>